﻿<div class="blade-static __bottom" ng-if="blade.bottomTemplate">
    <ng-include src='blade.bottomTemplate'> </ng-include>
</div>

<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <div class="sub-t">Select files</div>
            <form class="form">
                <div ng-show="uploader.isHTML5">
                    <!-- 3. ng-file-over | ng-file-over="className" -->
                    <div over-class="bd-blue" nv-file-over nv-file-drop uploader="uploader" class="drag-area">
                        <div class="drag-content">
                            Drag and drop images here
                        </div>
                    </div>
                </div>

                <!-- 2. ng-file-select | ng-file-select="options" -->
                <div class="form-input __file">
                    <input type="file" multiple uploader="uploader" nv-file-select style="z-index: 0;" tabindex="-1">
                    <input type="text" style="z-index: 1; cursor: default;" readonly="">
                    <button class="btn __file" type="button" onclick="$('input[type=file]').trigger('click')" title="Open image file">
                        <i class="btn-ico fa fa-image"></i>
                    </button>
                </div>

                <div class="form-input __file">
                    <input ng-model="blade.newExternalImageUrl" type="url" placeholder='Paste image URL here' tabindex="-1">
                    <button class="btn __file" type="button" ng-click="addImageFromUrl()" title="Add image by URL">
                        <i class="btn-ico fa fa-plus"></i>
                    </button>
                </div>
            </form>
            
            <div ng-show="uploader.isUploading">
                <div class="sub-t">Progress</div>
                <div class="progress-bar __aqua" ng-style="{'width': uploader.progress + '%'}"></div>
            </div>

            <p class="note">Drag and drop an image to top left corner of images area to make it the default image.</p>
            <div class="tile-group triple __images-list" ui-sortable="sortableOptions" ng-model="blade.currentEntity.images">
                <div class="tile" ng-class="{'double': $first, '__selected': image.$selected}" ng-click="toggleImageSelect($event, image)" ng-repeat="image in blade.currentEntity.images" ng-include="'imageTemplate.html'"></div>
            </div>
        </div>

        <script type="text/ng-template" id="imageTemplate.html">
            <a class="tile-action" ng-click="copyUrl(image)"></a>
            <img class="tile-img" ng-src="{{image.url ? image.url : ''}}">
        </script>
    </div>
</div>